<!DOCTYPE html>
<html lang="en">


<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/plugins/fontawesome-free/css/all.min.css">
    <!-- Font Awesome Icons -->
    <link rel="stylesheet" href="/plugins/fontawesome-free/css/all.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="/dist/css/adminlte.min.css">
    <link rel="stylesheet" href="/plugins/overlayScrollbars/css/OverlayScrollbars.min.css">
    <link rel="stylesheet" href="/plugins/toastr/toastr.min.css">
    <link rel="stylesheet" href="/plugins/sweetalert2/sweetalert2.min.css">
    <!-- 自写主界面代码 -->
    <link rel="stylesheet" href="/my_works/css/admin_main.css">
    <!-- bootstrap-table -->
    <link rel="stylesheet" href="/plugins/bootstraptable/bootstrap-table.min.css">
</head>

<body>
    <div class="row Container">
        <div class="col-md-5"></div>
        <h2>学生信息</h2>
        <!-- 展示教师授课信息的模态框 -->
        <div class="modal fade" id="showCourseInfoModal">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">授课信息展示</h4>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">

                        <table class="table" id="showCourseInfoTable">
                            <thead class="thead-dark">
                                <tr>
                                    <th scope="col">课程编号</th>
                                    <th scope="col">课程名</th>
                                    <th scope="col">学分</th>
                                    <th scope="col">成绩详情</th>

                                </tr>
                            </thead>
                            <tbody id="showCourseInfoTableBody">
                                <tr>
                                    <th scope="row">1</th>
                                    <td>Mark</td>
                                    <td>Otto</td>
                                    <td>@mdo</td>
                                </tr>
                                <tr>
                                    <th scope="row">2</th>
                                    <td>Jacob</td>
                                    <td>Thornton</td>
                                    <td>@fat</td>
                                </tr>
                                <tr>
                                    <th scope="row">3</th>
                                    <td>Larry</td>
                                    <td>the Bird</td>
                                    <td>@twitter</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="modal-footer justify-content-between">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-primary" id="addCourseButton">新增课程</button>
                    </div>
                </div>
                <!-- /.modal-content -->
            </div>
            <!-- /.modal-dialog -->
        </div>
        <!-- 展示课程所修学生成绩的模态框 -->
        <div class="modal fade" id="showScoreModal">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">成绩展示</h4>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <p>主要内容</p>
                        <table class="table" id="scoreTable">
                            <thead class="thead-dark">
                                <tr>
                                    <th scope="col">学号</th>
                                    <th scope="col">姓名</th>
                                    <th scope="col">课程名</th>
                                    <th scope="col">成绩</th>
                                </tr>
                            </thead>
                            <tbody id="scoreTableBody">
                                <tr>
                                    <th scope="row">1</th>
                                    <td>Mark</td>
                                    <td>Otto</td>
                                    <td>@mdo</td>
                                </tr>
                                <tr>
                                    <th scope="row">2</th>
                                    <td>Jacob</td>
                                    <td>Thornton</td>
                                    <td>@fat</td>
                                </tr>
                                <tr>
                                    <th scope="row">3</th>
                                    <td>Larry</td>
                                    <td>the Bird</td>
                                    <td>@twitter</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="modal-footer justify-content-between">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-primary" data-dismiss="modal">确认</button>
                    </div>
                </div>
                <!-- /.modal-content -->
            </div>
            <!-- /.modal-dialog -->
        </div>
    </div>







    <!-- jQuery -->
    <script src="/plugins/jquery/jquery.min.js"></script>
    <!-- Bootstrap 4 -->
    <script src="/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
    <!-- AdminLTE App -->
    <script src="/dist/js/adminlte.min.js"></script>
    <script src="/plugins/bootstraptable/bootstrap-table.js"></script>
    <script src="/plugins/bootstraptable/locale/bootstrap-table-zh-CN.js"></script>
    <script src="/plugins/toastr/toastr.min.js"></script>
    <script src="/plugins/sweetalert2/sweetalert2.min.js"></script>
    <!-- 引入axios -->
    <script src="/plugins/axios/axios.min.js"></script>
    <!-- 引入自写js -->
    <script src="/my_works/js/student_manage.js"></script>
    <script src="/my_works/common/common.js"></script>
    <script>













        //查询教师成绩信息
        selectCourseInfo = () => {
            let id = localStorage.getItem("id");

            //调用展示课程信息的模态框
            $("#showCourseInfoModal").modal("show");
            axios({
                url: "/api/teacher/course/id?id=" + id,
                method: "GET",
            }).then((res) => {
                // console.log(res.data);
                //清除所有子元素
                // console.log("清楚");
                $("#showCourseInfoTableBody").empty();
                // console.log(res.data.data);

                res.data.data.forEach((data) => {
                    // console.log(data);
                    //添加表格子项
                    html = $("<tr>"
                        + "<td>" + data.no + "</td>"
                        + "<td>" + data.name + "</td>"
                        + "<td>" + data.credit + "</td>"
                        + "<td>" + '<button type="button" class="btn btn-block btn-primary btn-sm" onclick="selectScoreInfo(' + data.no + ')">查看</button>' + "</td>"
                        + "</tr>")
                    // console.log(data);
                    $("#showCourseInfoTableBody").append(html)


                })
                $("#addCourseButton").unbind("click").click(() => {
                    addCourse(id);
                })
            })


        }
        selectCourseInfo()

        /**
                 * 通过课程no查询所有成绩信息
                 * 通过模态框展示
                 */
        selectScoreInfo = (courseNo) => {
            //展示模态框
            $("#showScoreModal").modal("show");
            $("#showCourseInfoModal").modal("hide");


            //发起请求
            axios({
                url: "/api/teacher/score?courseNo=" + courseNo,
                method: "GET",

            }).then((res) => {

                // console.log(res.data.data);
                $("#scoreTableBody").empty();
                res.data.data.forEach((data) => {
                    html = $("<tr>"
                        + "<td>" + data.studentNo + "</td>"
                        + "<td>" + data.name + "</td>"
                        + "<td>" + data.courseName + "</td>"
                        + "<td>" + data.score + "</td>"
                        + "</tr>")
                    $("#scoreTableBody").append(html);
                })


            })
        }

    </script>
</body>

</html>